<div cdkDrag cdkDragHandle
	 cdkDragRootElement=".cdk-overlay-pane"
	 mat-dialog-title>
	<div>
		<h3>Export results</h3>
	</div>
	<button aria-label="close dialog" mat-dialog-close mat-icon-button>
		<span class="material-symbols-outlined notranslate">close</span>
	</button>
</div>

<div mat-dialog-content style="overflow: hidden;">
	<div style="padding: 12px 12px 0px 12px;">
		<mat-form-field appearance="fill" style="width: 100%">
			<mat-label>Hide Column</mat-label>
			<mat-select #columnList (selectionChange)="show($event.value)" [ngModel]="columns" multiple>
				<mat-option *ngFor="let column of columns" [value]="column">
					{{ column }}
				</mat-option>
			</mat-select>
		</mat-form-field>
	</div>
	<ng-container *ngIf="!isLoading">
		<ngx-monaco-editor
			*ngIf="str.length < 20000000"
			[(ngModel)]="str"
			[options]="editorOptions">
		</ngx-monaco-editor>
		<div *ngIf="str.length > 20000000"
			 style="height: 100%; display: flex; justify-content: center; align-items: center;">
			Preview not available
		</div>
	</ng-container>
</div>
<mat-dialog-actions>
	<mat-button-toggle-group (change)="show(columnList.value)" [(ngModel)]="type">
		<mat-button-toggle value="CSV">CSV</mat-button-toggle>
		<mat-button-toggle value="JSON">JSON</mat-button-toggle>
	</mat-button-toggle-group>
	<button
		(click)="snackBar.open('Rows copied', '⨉', {duration: 3000})"
		[cdkCopyToClipboard]="str"
		cdkFocusInitial
		color="primary"
		mat-stroked-button>
		Copy
	</button>
	<button (click)="download()" color="primary" mat-flat-button>
		Download
	</button>
</mat-dialog-actions>
